<!--TODO: 需求展示页面 -->
<template>
    <div class="app-container">
        <div style="margin-top: 1px">
            <el-row>
                <el-col span = '18'>
                    <el-form :model="listQuery" inline size="small" label-width="80px" >
                        <el-form-item label="关键词:">
                            <el-input style="width: 150px;" v-model="listQuery.keyword" placeholder="输入关键词"></el-input>
                        </el-form-item>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleSearch"
                        >
                            搜索
                        </el-button>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <div class="table-container">
            <el-table ref="goodsTable"
                      :data="requestsList"
                      style="width: 100%"
                      @selection-change=""
                      v-loading="listLoading"
            >
                <el-table-column label="物品id"  align="center" min-width="5%">
                    <template slot-scope="scope">
                        <p>{{scope.row.requestId}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="名称" align="center" min-width="15%">
                    <template slot-scope="scope">
                        {{scope.row.requestName}}
                    </template>
                </el-table-column>
                <el-table-column label="类型"  align="center" min-width="10%">
                    <template slot-scope="scope">
                        {{scope.row.typeId}}
                    </template>
                </el-table-column>
                <el-table-column label="价格" align="center" min-width="10%">
                    <template slot-scope="scope">
                        {{scope.row.price}}
                    </template>
                </el-table-column>
                <el-table-column label="描述" align="center" min-width="30%">
                    <template slot-scope="scope">
                        {{scope.row.description}}
                    </template>
                </el-table-column>

                <el-table-column label="操作"  align="center" min-width="20%">
                    <template slot-scope="scope">

                        <el-tooltip :enterable = false class="item" effect="light" content="请求交易" placement="top">
                            <el-button type="success"
                                       style="width: 60% ;align-content: center;align-self: center"
                                       @click="ShowOwnerInfo(scope.row.studentId)"
                            >
                                请求交易
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div>
            <el-row justify="center" type="flex">
                <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script>
import {getAllRequest, getRequestList, getStudentByStudentId, getTestResult} from "../../api/student";
import request from "../../utils/request";

const defaultListQuery = {
    keyword: null,
    id: -1,
    pageNum: 1,
    pageSize: 10,
};

const defaultQueryInfo = {
    keyword: null,
    pageNum: 1,
    pageSize: 20
}

const defaultEditInfo = {
    id: null,
    isVisible: false,
    operateType: 'update', // or create
}

export default {
    name:"Requests",
    data(){
        return{
            tableData: [],
            queryInfo: defaultQueryInfo,
            total: 0,

            queryModel: {keyword: null},
            listQuery: Object.assign({}, defaultListQuery),
            //数据
            username: localStorage.getItem('username'),
            requestsList: [],
            listLoading: null,
        }
    },
    created() {
        this.getList();
    },
    methods:{
        getList()
        {
            this.listLoading = 1;
            getAllRequest().then(res => {
                this.listLoading = false;
                this.requestsList = res.data.list;
                this.total=res.data.list.length;
            })
        },
        handleSizeChange(newSize) {
            this.queryInfo.pageSize = newSize;
            this.getList();
        },
        handleCurrentChange(newPage) {
            this.queryInfo.pageNum = newPage;
            this.getList();
        },

        handleSearch() {

        },

        ShowOwnerInfo(id){
            getStudentByStudentId(id).then( res =>
                {
                    this.$alert(
                        <div align="center">
                            <p >发布者的QQ为{res.data.list[0].qq}</p>
                            <p>发布者的电话为{res.data.list[0].tel}</p>
                            <p>请尽快与发布者联系！</p>
                        </div>
                    );
                }
            )

        }
    }

}
</script>

<style scoped>

</style>
